
<template>
  <div class="app-container">
    <ZlTable ref="table" url="/sys/quartz/getLogPageList" :param.sync="param" :init="false">
      <template slot="search">
        <el-form :inline="true" :model="param" class="left">
          <el-form-item label="状态">
            <el-select v-model="param.status" placeholder="请选择" clearable>
              <el-option label="执行中" value="0" />
              <el-option label="失败" value="1" />
              <el-option label="成功" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="执行方式">
            <el-select v-model="param.type" placeholder="请选择" clearable>
              <el-option label="自动" value="0" />
              <el-option label="手动" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" size="small" @click="query">搜 索</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot="cols">
        <el-table-column
          align="center"
          width="50px"
          type="index"
          :index="indexMethod"
        />
        <el-table-column prop="name" label="任务名称" min-width="150px" show-overflow-tooltip/>
        <el-table-column prop="status" label="状态" align="center" width="80" sortable="custom">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" type="warning">{{scope.row.statusName}}</el-tag>
            <el-tag v-else-if="scope.row.status === 2" type="success">{{scope.row.statusName}}</el-tag>
            <el-tag v-else type="danger">{{scope.row.statusName}}</el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="typeName" label="执行方式" align="center" min-width="100px" show-overflow-tooltip/>
        <el-table-column prop="startTime" label="开始时间" align="center" width="170px" show-overflow-tooltip sortable="custom"/>
        <el-table-column width="150px" prop="orgName" label="执行用户" sortable="custom" show-overflow-tooltip align="center"/>
        <el-table-column prop="endTime" label="结束时间" align="center" width="170px" show-overflow-tooltip sortable="custom"/>
        <el-table-column align="center" label="操作" width="180px">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status==1"
              title="查看错误"
              type="primary"
              circle
              plain
              class="el-icon-view"
              size="mini"
              @click.native.prevent="viewError(scope.row)"
            />
          </template>
        </el-table-column>
      </template>
    </ZlTable>
    <el-dialog :visible.sync="view" width="600px">
      <div v-loading="loading" style="height:500px;overflow:auto">
        <pre>{{text}}</pre>
      </div>
    </el-dialog>
  </div>

</template>
<script>

import ZlTable from '@/components/table/table-con'
import { getLogById } from '@/api/quartz'
export default {
  name: 'QuartzLog',
  components: { ZlTable },
  data() {
    return {
      param: {
        jobName: null,
        type: null,
        status: null
      },
      view: false,
      loading: false,
      text: null
    }
  },
  mounted() {
    this.param.jobName = this.$route.params.jobName
    console.log(this.param.jobName);
    this.query()
  },
  methods: {
    indexMethod(index) {
      return (this.$refs.table.pageNum - 1) * this.$refs.table.pageSize + index + 1
    },
    viewError(row){
      this.loading = true
      this.view = true
      
      getLogById(row.id).then((r)=>{
        this.text = r.data.log
      }).finally(()=>this.loading=false)
    },
    query() {
      this.$refs.table.query()
    }
  }
}
</script>
<style scoped>

</style>
